<template>
    <div>
        <div class="box" id="box">
            <div>
                <div class="window1">
                    <!-- 历史视频： -->
                    <HKPlayer class="player" ref="DHPlayerdemo" :dialogVisible="dialogVisible" :getlayout="getlayout" :getplayMode='getplayMode'></HKPlayer>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import DHPlayer from "./DHPlayer.vue"
    import HKPlayer from "./HKPlayer.vue"
    import { getChannelData, OnPtzDirctCtrl } from "../../url/api.js"
    export default {
        components: {
            DHPlayer,
            HKPlayer
        },
        props: {
            monitoringData: {
                type: Object,
                default() {
                    return {}
                },
            },
            dialogVisible:{
                type: Boolean,
            },
            getplayMode:{
                type: Number,
            }
        },
        data() {
            return {
                getlayout:'1x1',
                begintime: '',
                endtime: '',
                divisionNum: 1,
                pathList: [
                    // {
                    //     path: 'rtsp://10.18.128.45:9090/dss/monitor/param?cameraid=1000004%240&substream=1&trackID=801',
                    //     redirect: false
                    // },
                ], //实时预览测试
                pathList2: [],
                errorTip: '',
                tableData: {},
                deviceRowData: {},
                isRedirect: true,
            }
        },
        watch: {
            monitoringData: {
                immediate: true,
                handler(val) {
                    this.tableData = val
                    console.log("监控数据1111111111", val);
                    this.tableData = val;
                    if (this.tableData.deviceId) {
                    this.getData();
                }
                },

            },
            getplayMode(val){
                console.log(val);
            }
        },
        // created: {
        //     monitoringData(val) {

        //     },
        // },
        methods: {
            getData() {
                let urldata = {}
                urldata.path = this.tableData.extra;
                urldata.redirect = true;
                this.pathList.push(urldata);
                console.log(this.deviceRowData, "WWWWWWWWWWWW",this.pathList);
            },
        },
        mounted() {
        },

    }
</script>

<style lang="less" scoped>
    .ptz {
        width: 264px;
        display: flex;
        justify-content: space-around;

        .outer-ring {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: #fff;
            border-radius: 50%;
            box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9, 0 2px 3px #333;

            i {
                font-size: 30px;
                cursor: pointer;

                &:hover {
                    color: #00B176;
                }
            }

            .caret-up {
                position: absolute;
                top: 6px;
                left: 95px;
                margin-left: -10px;
            }

            .caret-down {
                position: absolute;
                bottom: 6px;
                left: 95px;
                margin-left: -10px;
            }

            .caret-left {
                position: absolute;
                left: 6px;
                top: 95px;
                margin-top: -10px;
            }

            .caret-right {
                position: absolute;
                right: 6px;
                top: 95px;
                margin-top: -10px;
            }

            .ob-caret-left {
                transform: rotate(45deg);
                position: absolute;
                top: 30px;
                left: 24px;
            }

            .ob-caret-up {
                transform: rotate(45deg);
                position: absolute;
                top: 30px;
                right: 24px;
            }

            .ob-caret-right {
                transform: rotate(45deg);
                position: absolute;
                bottom: 30px;
                right: 24px;
            }

            .ob-caret-down {
                transform: rotate(45deg);
                position: absolute;
                bottom: 30px;
                left: 24px;
            }

            .inner-ring {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 80px;
                height: 80px;
                border-radius: 50%;
                background-color: #fff;
                border: 1px solid #ddd;

                .plus {
                    position: absolute;
                    top: 5px;
                    left: 35px;
                    margin-left: -10px;
                }

                .line {
                    height: 1px;
                    width: 100%;
                    background-color: #ddd;
                    position: absolute;
                    top: 39px;
                    left: 0;
                }

                .minus {
                    position: absolute;
                    bottom: 5px;
                    left: 35px;
                    margin-left: -10px;
                }
            }
        }
    }

    .window1,
    .window2 {
        /* float: left; */
        margin-top: 20px;
    }

    #box /deep/ #testPlayer,
    #testPlayer2 {
        width: 600px;
        height: 450px;
    }


    .box {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .radiobox {
        margin: -20px 0px 20px 15px;
    }

    .timebox {

        margin-bottom: 20px;
    }

    .timebox /deep/.el-input {
        width: 200px;
    }

    .buttonbox {
        display: flex;
        justify-content: flex-end;
    }
    .player{
    width: 900px;
    height: 480px;
}
</style>